<template>

    <div>
        <el-page-header @back="goBack" content="详情页面">
        </el-page-header>

        <h2>
            活动商品列表详情页面
        </h2>

        <div class="" id="box">
            <ul>
                <li v-for="(o, index) in activityList" :key="index">
                    <img :src="getUrl(o.tbPrdInfo.picPath)" class="image">
                    <h5 class="labelName">商品名称：{{o.tbPrdInfo.labelName}}</h5>
                    <p class="shortDesc"> 商品描述：{{o.tbPrdInfo.shortDesc}}</p>
                   <p class="shortDesc">  商品库存：{{o.newStore}}</p>
                    <div style="text-align:  right" v-if="o.newStore === 0">
                        <el-button disabled type="primary" >该商品已售罄</el-button>
                    </div>
                    <div style="text-align: right" v-else>
                        <el-button type="primary" v-if="flag" @click="productMessage(o.pid,index)">立即抢购</el-button>
                        <el-button type="primary" v-else >活动未开始</el-button>
                    </div>

                </li>
            </ul>

        </div>

    </div>
</template>

<script>
    export default {
        name: "ActivityContent",
        data(){
            return{
                tid: '',
                activityList: '',
                flag : true,
                title :"",
                picPath : "1.jpg",
                // 当前页
                currentPage: 1,
                // 每页显示 5 条数据
                pageSize: 5,
                // 每页显示多少条数据的数组
                pageList: [5, 10, 15, 20],
            }
        },
        created() {
            this.tid = this.$store.getters.getTid;
            // console.log(this.tid);
            this.getActivity();
            // this.getInfo();
            console.log(this.activityList);
            this.clearUserOrder();
        },
        computed: {
            // 计算分页所显示的数据
            data() {
                if (this.activityList != null) {
                    // 使用 splice 方法从第几个开始取出多少条数据
                    return this.activityList.slice((this.currentPage - 1) * this.activityList, this.currentPage * this.pageSize)
                }
            },
        },
        methods:{
            // 修改当前页显示 多少数据
            handleSizeChange (val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize = val
            },
            // 修改当前是 第几页
            handleCurrentChange (val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val
            },
            goBack() {
                // console.log('go back');
                this.$router.push("activity");
            },
            clearUserOrder(){
                setInterval(() => {
                    // console.log(this.activityList[0]);
                    let date = new Date(this.activityList[0].startTime);
                    let dates = new Date(this.activityList[0].finishTime);
                    if(date > new Date()){
                        // console.log("活动未开始")
                        this.flag = false;
                    }else{
                        this.flag = true;
                    }
                },100);
            },
            productMessage(pid,index){
                this.$store.commit("setPid",pid);
                this.$router.push("activityContentOne")
            },
            // 获取图片
            getUrl (picPath) {
                return `http://localhost:8092/product/activity/findProductPicByPath?name=`+picPath;
            },
            getInfo() {
                //轮询获取更新过程中的信息
                if (this.timer) {
                    clearInterval(this.timer)
                } else {
                    this.timer = setInterval(() => {
                        this.getActivity();
                    }, 1000);
                }
            },
            getActivity(){
                // let nowTime = this.getNowTime();
                let nowTime = "activity";
                this.$http.post("product/seckill/selectTbActInfByNowTimeAndTid",{time:nowTime,tid:this.tid}).then((res)=>{
                    // console.log("获取的当前活动的商品信息")
                    // console.log(res);

                    let nowTime = "product";
                    let arr = [];
                    for (let i = 0; i < res.tbActProductList.length; i++) {
                        // console.log(res.tbActProductList[i]);
                        // console.log(nowTime)
                        this.$http.post("product/seckill/selectTbActInfByNowTimeAndPid",{time:nowTime,pid:res.tbActProductList[i].pid}).then((res)=>{
                            // res.tbActProductList[i] = res;
                            // console.log(res);
                            arr.push(res);
                        })
                    }

                    this.activityList = arr;

                })
            },
            // 获取日期格式
            getNowTime(){
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                if(month < 10){
                    month = "0"+month;
                }
                let day = date.getDate();
                if(day < 10){
                    day = "0"+day;
                }
                let hour = date.getHours();

                if(hour < 10){
                    hour = "0"+hour;
                }
                if(hour === 24){
                    day = day +1;
                    hour = "00";
                }
                let dateTime = year+month+day+hour;
                return dateTime;
            },
        }
    }
</script>

<style scoped>
    body{
        margin: 0px 0px;
        padding: 0px 0px;
    }
    #box{
        width: 80%;
        /*border: 1px solid black;*/
        margin: auto;
        text-align: left;
    }
    #box ul{
        display: flex;
        flex-wrap: wrap;
    }
    #box li{
        width: 250px;
        padding: 10px 10px;
        list-style: none;
        margin-right: 15px;
        margin-bottom: 15px;
        border: 1px solid #eee;
        position: relative;
    }
    #box img{
        width: 250px;
        height: 200px;
    }
    .labelName{
        height: 35px;
        /*border: 1px solid black;*/
        margin: 0px 0px;
    }
    .shortDesc{
        height: 35px;
        font-size: 10px;
        /*border: 1px solid black;*/
    }
</style>
